<template>
  <div class="container mt-5">
    <div class="mb-4">
      <div class="input-group">
        <input type="text" v-model="query_n" placeholder="请输入 n 的值" class="form-control">
        <button @click="query_movies_by_n" class="btn btn-warning">查询电影标题</button>
      </div>
    </div>

    <div v-if="titles_data.length > 0" class="mb-4">
      <h3>电影标题列表</h3>
      <div class="row">
        <div class="col-md-4 mb-4" v-for="(title, index) in titles_data" :key="index">
          <div class="card glass-card">
            <div class="card-body">
              <h5 class="card-title">{{ title.TITLE }}</h5>
              <p class="card-text">评分：{{ title.SCORE }}</p>
              <p class="card-text">票房：{{ title.BOXOFFICE }}</p>
              <a :href="title.URL" target="_blank" class="btn btn-info">豆瓣链接</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { Toast } from 'bootstrap'

const movies_data = ref([])
const type_item = reactive({ code: '', name: '' })
const query_n = ref('')
const titles_data = ref([])

const get_douban_movies = function () {
  const url = 'http://127.0.0.1:8000/api/douban_n?n=1000'
  axios.get(url).then(res => {
    if (Array.isArray(res.data.data)) {
      movies_data.value = res.data.data
    } else {
      console.error('返回的数据格式不正确，应为数组')
    }
  }).catch(error => {
    console.error('获取豆瓣电影数据失败：', error.message)
  })
}

const add_type = function () {
  const params = new URLSearchParams()
  params.append('code', type_item.code)
  params.append('name', type_item.name)

  const url = 'http://127.0.0.1:8000/api/add_type'
  axios.post(url, params, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  }).then(res => {
    console.log('添加类型成功：', res.data)
    const toast = new Toast(document.getElementById('successToast'))
    toast.show()
    type_item.code = ''
    type_item.name = ''
  }).catch(error => {
    console.error('添加类型失败：', error.message)
  })
}

const query_movies_by_n = function () {
  if (!query_n.value) {
    alert('请输入 n 的值')
    return
  }

  const url = `http://127.0.0.1:8000/api/title?n=${query_n.value}`
  axios.get(url).then(res => {
    if (Array.isArray(res.data.data)) {
      titles_data.value = res.data.data
    } else {
      console.error('返回的数据格式不正确，应为数组')
    }
  }).catch(error => {
    console.error('查询电影标题失败：', error.message)
  })
}
</script>

<style>
body {
  background-color: #f5f5f5;
  font-family: 'Inter', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.btn-warning {
  background-color: #ffc107;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-warning:hover {
  background-color: #e0a800;
  transform: scale(1.05);
}

.btn-info {
  background-color: #17a2b8;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-info:hover {
  background-color: #138496;
  transform: scale(1.05);
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
</style>